<template>
  <div>
    <div class="card" style="margin-bottom:18px ">
      <el-input v-model="data.authorName" style="width: 280px;margin-right: 10px" placeholder="请输入留言人姓名查询" :prefix-icon="Search"/>
      <el-input v-model="data.authorId" style="width: 280px;margin-right: 10px" placeholder="请输入留言人id查询" :prefix-icon="Search"/>
<!--      <el-input v-model="data.teacher" style="width: 280px;margin-right: 10px" placeholder="请输入任教老师查询" :prefix-icon="Search"/>-->
      <el-button type="primary" plain style="margin-left: 10px"  @Click="load">查询</el-button>
      <el-button type="info" plain style="margin-left: 10px " @Click="reset">重置</el-button>
<!--      <el-button type="primary" plain @Click="handeladd">新增课程</el-button>-->
    </div>
  </div>
  <div class="card " style="margin-bottom:18px;">
    <div>
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" type="index" width="80"  />
        <el-table-column prop="authorId" label="留言人id" width="120"  />
        <el-table-column prop="authorName" label="留言人姓名" width="160" />
        <el-table-column prop="text" label="留言内容"  />
        <el-table-column prop="createTime" label="留言时间"  />
        <el-table-column label="操作" width="180" v-if="user.role === '管理员'" >
          <template #default="scope">
<!--            <el-button type="primary" plain @Click="handeledit(scope.row)">编辑</el-button>-->
            <el-button type="danger" plain @Click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="card">
    <el-pagination v-model:page-size="data.pageSize" v-model:current-page="data.pageNum"
                   @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />
  </div>

  <div style="position: fixed; bottom: 0; left: 209px; right: 0;">
    <div class="card" style="margin-bottom:10px;padding: 10px;">
      <el-form :model="data.messageForm" >
        <el-form-item label="留言内容"  >
          <el-input
              v-model="data.messageForm.text"
              type="textarea"
              :rows="2"
              placeholder="请输入留言内容"
              style="flex: 3; min-height: 60px;"
          />
          <el-button type="primary" @click="sendMessage">发送留言</el-button>
<!--          <el-button type="primary" @click="sendMessage" style="align-self: flex-end; white-space: nowrap; min-width: 100px;"/>-->
        </el-form-item>
      </el-form>
    </div>
  </div>

  <!-- 新增内容结束 -->

</template>
<script setup>
  import { reactive} from "vue";
  import { Search } from '@element-plus/icons-vue'
  import request from "@/utils/request";
  import {ElMessage, ElMessageBox} from "element-plus";

  const user = JSON.parse(localStorage.getItem('student-user')||'{}')

const  data =reactive({
  authorName:"",
  authorId:"",
  teacher:"",
  total:0,
  tableData:[],
  pageNum: 1,//当前页数
  pageSize:8,//每一页的个数
  formVisible:false,
  form:{},
  messageForm:{
    text:""
  }
})
  const load=() =>{
    request.get("/liuyan/selectPage",{
      params:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        authorName: data.authorName,
        authorId: data.authorId,
        userRole:user.role
      }
    }).then(res=>{
    data.tableData = res.data?.list || []
      data.total = res.data.total || 0
    })
  }
  //调用方法获取数据
  load();
const handelCurrentChange = () => {
  //翻页后重新加载数据页面
  load()
}
const reset =()=>{
      data.authorName = ""
      data.authorId = ""
      load()
  }
  const reset1 =()=>{
    data.messageForm = {}
     load()
  }
  const handeladd =()=>{
    data.form= { }
    data.formVisible=true
  }
  const handeledit =(row)=>{
   data.form=JSON.parse(JSON.stringify(row))
    data.formVisible=true;
  }
  const del =(id)=>{
    ElMessageBox.confirm('删除数据后无法回复，您确认删除吗？','删除确认',{type:'warning'}).then(res=> {
          request.delete('/liuyan/delete/' + id).then(res => {
            if (res.code === '200') {
              load()
              ElMessage.success("删除成功")
            } else {
              ElMessage.error(res.msg)
            }
          })
        }) .catch(res => {})
  }
  //保存数据到后台
  const sendMessage =()=>{
    request.request( {
      url:'/liuyan/add',
      method:'POST',
      data :{
        text:data.messageForm.text,
        userId:user.id,
        userName:user.name
      }
    }).then(res=>{
      if(res.code ==='200'){
        reset1()
        //data.formVisible=false //弹窗关闭
       ElMessage.success("操作成功")
      }else
      {
        ElMessage.error(res.msg)
      }

    })
  }
</script>